import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  StatusBar,
  SafeAreaView,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

interface CouponItem {
  id: number;
  title: string;
  points: number;
  value: number;
  validityPeriod: string;
}

const PointsMallScreen = ({ navigation }: any) => {
  const points = 9527;
  
  const coupons: CouponItem[] = [
    {
      id: 1,
      title: '积分兑换30元抵用券',
      points: 600,
      value: 30,
      validityPeriod: '2018/12/12-2018/12/31',
    },
    {
      id: 2,
      title: '积分兑换30元抵用券',
      points: 600,
      value: 30,
      validityPeriod: '2018/12/12-2018/12/31',
    },
    {
      id: 3,
      title: '积分兑换30元抵用券',
      points: 600,
      value: 30,
      validityPeriod: '2018/12/12-2018/12/31',
    },
    {
      id: 4,
      title: '积分兑换30元抵用券',
      points: 600,
      value: 30,
      validityPeriod: '2018/12/12-2018/12/31',
    },
  ];

  const handleExchange = (couponId: number) => {
    // TODO: 实现兑换逻辑
    console.log('兑换优惠券:', couponId);
  };

  return (
    <SafeAreaView style={styles.container}>
      <StatusBar backgroundColor="#FF4B4B" barStyle="light-content" />
      
      {/* 头部 */}
      <View style={styles.header}>
        <TouchableOpacity 
          style={styles.backButton} 
          onPress={() => navigation.goBack()}
        >
          <Icon name="arrow-back" size={24} color="#fff" />
        </TouchableOpacity>
        <Text style={styles.headerTitle}>积分商城</Text>
        <View style={styles.headerRight} />
      </View>

      {/* 积分显示 */}
      <View style={styles.pointsContainer}>
        <Text style={styles.pointsNumber}>{points}</Text>
        <Text style={styles.pointsLabel}>积分总额度</Text>
      </View>

      {/* 积分兑换优惠券列表 */}
      <View style={styles.content}>
        <Text style={styles.sectionTitle}>积分兑换优惠券</Text>
        <ScrollView style={styles.couponList}>
          {coupons.map((coupon) => (
            <View key={coupon.id} style={styles.couponItem}>
              <View style={styles.couponLeft}>
                <View style={styles.couponTag}>
                  <Text style={styles.couponTagText}>全场通用</Text>
                </View>
                <Text style={styles.couponTitle}>{coupon.title}</Text>
                <Text style={styles.couponValidity}>
                  使用期限：{coupon.validityPeriod}
                </Text>
              </View>
              <View style={styles.couponRight}>
                <Text style={styles.pointsRequired}>{coupon.points}积分</Text>
                <TouchableOpacity
                  style={styles.exchangeButton}
                  onPress={() => handleExchange(coupon.id)}
                >
                  <Text style={styles.exchangeButtonText}>立即兑换</Text>
                </TouchableOpacity>
              </View>
            </View>
          ))}
        </ScrollView>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#FF4B4B',
    paddingVertical: 16,
    paddingHorizontal: 15,
  },
  backButton: {
    width: 40,
    height: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerTitle: {
    fontSize: 18,
    color: '#fff',
    fontWeight: 'bold',
  },
  headerRight: {
    width: 40,
  },
  pointsContainer: {
    backgroundColor: '#FF4B4B',
    paddingBottom: 30,
    alignItems: 'center',
  },
  pointsNumber: {
    fontSize: 36,
    color: '#fff',
    fontWeight: 'bold',
    marginBottom: 5,
  },
  pointsLabel: {
    fontSize: 14,
    color: 'rgba(255, 255, 255, 0.8)',
  },
  content: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    marginTop: -20,
    paddingTop: 20,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginLeft: 15,
    marginBottom: 15,
  },
  couponList: {
    paddingHorizontal: 15,
  },
  couponItem: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    marginBottom: 10,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  couponLeft: {
    flex: 1,
  },
  couponTag: {
    backgroundColor: '#FFF0F0',
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 4,
    alignSelf: 'flex-start',
    marginBottom: 8,
  },
  couponTagText: {
    fontSize: 12,
    color: '#FF4B4B',
  },
  couponTitle: {
    fontSize: 16,
    color: '#333',
    marginBottom: 8,
  },
  couponValidity: {
    fontSize: 12,
    color: '#999',
  },
  couponRight: {
    alignItems: 'flex-end',
  },
  pointsRequired: {
    fontSize: 14,
    color: '#FF4B4B',
    marginBottom: 8,
  },
  exchangeButton: {
    backgroundColor: '#FF4B4B',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 15,
  },
  exchangeButtonText: {
    fontSize: 12,
    color: '#fff',
  },
});

export default PointsMallScreen; 